'use strict';

import React from 'react';
import {View,Image,ScrollView,StatusBar,StyleSheet,Text,TouchableHighlight} from  'react-native';
import Utils from '../utils';
import  Icon from 'react-native-vector-icons/Ionicons';
import  Swiper from 'react-native-swiper';
import  weatherData from  './weatherData';
import  styles from './styles';

class  Weather extends React.Component{
    static propTypes = {
        back:React.PropTypes.func.isRequired
    }

    constructor(props){
        super(props);
        this.state ={
            weather:weatherData
        }
    }

    componentDidMount(){
        StatusBar.setBarStyle('light-content',true);//ios
    }
    _back(){
        this.props.back();
    }

    render(){
        const slides = this.state.weather.map((elem,index)=>{
            const hourView = elem.hours.map((hourElem, hourIndex) => {
                return(
                    <View key={hourElem.key} style={styles.withinDayHoursBox}>
                        <Text style={hourIndex==0?styles.withinDayHoursTimeBold:styles.withinDayHoursTime}>{hourElem.time}</Text>
                        <Icon name={hourElem.icon} size={25} style={[styles.withinDayHoursIcon,{color:hourElem.color}]}></Icon>
                        <Text style={hourIndex==0?styles.withinDayHoursDegreeBold:styles.withinDayHoursDegree}>{hourElem.time}</Text>
                    </View>
                );
            });

        const  dayView = elem.days.map((dayElem,dayIndex)=> {

            return (
                <View key={dayElem.key} style={styles.withinWeekLine}>
                    <View style={styles.withinWeekDay}>
                        <Text style={styles.withinWeekDayText}>{dayElem.day}</Text>
                    </View>
                    <View style={styles.withinWeekIcon}>
                        <Icon name={dayElem.icon} style={styles.withinWeekIconIcon} size={25}></Icon>
                    </View>
                    <View style={styles.withinWeekDegree}>
                        <Text style={styles.withinWeekHigh}>{dayElem.high}</Text>
                        <Text style={elem.night?styles.withinWeekLowNight:styles.withinWeekLow}>{dayElem.low}</Text>
                    </View>
                </View>
            );
        });

        return ( <View key={elem.key}>
            <Image style={styles.image} source={elem.bg}></Image>
            <ScrollView style={styles.pageContainer} showsVerticalScrollIndicator={false}>
                <View style={styles.headInfo}>
                    <Text style={styles.city}>{elem.city}</Text>
                    <Text style={styles.abs}>{elem.abs}</Text>
                    <Text style={styles.degree}>{elem.degree}</Text>
                    <Text style={styles.circle}>°</Text>
                </View>
                <View style={styles.withinDay}>
                    <View style={styles.withinDayGeneral}>
                        <View style={styles.withinDayHead}>
                            <Text style={styles.withinDayWeek}>{elem.today.week}</Text>
                            <Text style={styles.withinDayDay}>{elem.today.day}</Text>
                        </View>
                        <View style={styles.withinDayTail}>
                            <Text style={styles.withinDayHigh}>{elem.today.high}</Text>
                            <Text style={elem.night?styles.withinDayLowNight:styles.withinDayLow}>{elem.today.low}</Text>
                        </View>
                    </View>
                    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} >
                        <View style={styles.withinDayHoursContainer}>
                            <View style={styles.withinDayHours}>
                                {hourView}
                            </View>
                        </View>

                    </ScrollView>
                    <View style={styles.withinWeek}>
                        {dayView}
                    </View>
                    <View style={styles.weatherInfo}>
                        <Text style={styles.weatherInfoText}>{elem.info}</Text>
                    </View>
                    <View style={styles.weatherOther}>
                        <View style={styles.weatherOtherSection}>
                            <View style={styles.weatherOtherLine}>
                                <Text style={styles.weatherOtherTitle}>日出：</Text>
                                <Text style={styles.weatherOtherValue}>{elem.rise}</Text>
                            </View>
                            <View style={styles.weatherOtherLine}>
                                <Text style={styles.weatherOtherTitle}>日落：</Text>
                                <Text style={styles.weatherOtherValue}>{elem.down}</Text>
                            </View>
                        </View>
                        <View style={styles.weatherOtherSection}>
                            <View style={styles.weatherOtherLine}>
                                <Text style={styles.weatherOtherTitle}>降雨概率：</Text>
                                <Text style={styles.weatherOtherValue}>{elem.prop}</Text>
                            </View>
                            <View style={styles.weatherOtherLine}>
                                <Text style={styles.weatherOtherTitle}>湿度：</Text>
                                <Text style={styles.weatherOtherValue}>{elem.humi}</Text>
                            </View>
                        </View>
                        <View style={styles.weatherOtherSection}>
                            <View style={styles.weatherOtherLine}>
                                <Text style={styles.weatherOtherTitle}>风速：</Text>
                                <Text style={styles.weatherOtherValue}>{elem.prop}</Text>
                            </View>
                            <View style={styles.weatherOtherLine}>
                                <Text style={styles.weatherOtherTitle}>体感温度：</Text>
                                <Text style={styles.weatherOtherValue}><Text style={{fontSize:10}}>{elem.dir}</Text>{elem.speed}</Text>
                            </View>
                        </View>
                        <View style={styles.weatherOtherSection}>
                            <View style={styles.weatherOtherLine}>
                                <Text style={styles.weatherOtherTitle}>降水量：</Text>
                                <Text style={styles.weatherOtherValue}>{elem.rain}</Text>
                            </View>
                            <View style={styles.weatherOtherLine}>
                                <Text style={styles.weatherOtherTitle}>气压：</Text>
                                <Text style={styles.weatherOtherValue}>{elem.pres}</Text>
                            </View>
                        </View>
                        <View style={styles.weatherOtherSection}>
                            <View style={styles.weatherOtherLine}>
                                <Text style={styles.weatherOtherTitle}>能见度：</Text>
                                <Text style={styles.weatherOtherValue}>{elem.sight}</Text>
                            </View>
                            <View style={styles.weatherOtherLine}>
                                <Text style={styles.weatherOtherTitle}>紫外线指数：</Text>
                                <Text style={styles.weatherOtherValue}>{elem.uv}</Text>
                            </View>
                        </View>
                    </View>
                </View>
            </ScrollView>
        </View>);
        });


        return(
            <View>
                <Swiper
                    style={styles.wrapper} showsButton={false}
                    paginationStyle={{bottom:10,paddingTop:10,borderTopColor:'rgba(255,255,255,0.7)',borderTopWidth:Utils.pixel}}
                    dot={<View style={{backgroundColor: 'rgba(255,255,255,0.2)', width: 6, height: 6, borderRadius: 3, marginLeft: 3, marginRight: 3, marginTop: 13, marginBottom: 33,}} />}
                    activeDot ={
                    <View style={{backgroundColor: 'rgba(255,255,255,0.5)', width: 6, height: 6, borderRadius: 3, marginLeft: 3, marginRight: 3, marginTop: 13, marginBottom: 33,}} />}
                    >
                    {slides}
                    </Swiper>
                <TouchableHighlight onPress={()=>this._back()} style={styles.backBtn}>
                    <Icon size={17} name="ios-list-outline" style={styles.backBtnIcon}></Icon>
                </TouchableHighlight>
            </View>
        );
    }
}

export  default class  extends React.Component{
    _back(){
        this.props.navigator.pop();
        StatusBar.setBarStyle('default');//ios
    }
    render() {
        return(
            <View style={styles.weatherContainer}>
                <Weather back={() => this._back()}></Weather>
            </View>
        )
    }
}